<template>
  <div>
    <table border="1" class="workTable">
      <tr>
        <td colspan="2" class="boldText">作业指导书</td>
        <td colspan="2">产品名称: {{materialName}}</td>
        <td><span class="required">*</span>编号</td>
        <td>
          <el-input size="mini" maxlength="10" v-model="sopform.instructionsNo" placeholder="请输入编号"></el-input>
        </td>
      </tr>
      <tr>
        <td class="table1Td">客户名称</td>
        <td>{{customerName}}</td>
        <td class="table1Td"><span class="required">*</span>工序名称</td>
        <td>
          <el-select size="mini" v-model="sopform.procedureId" placeholder="请选择">
            <el-option v-for="item in procedureOptions" :key="item.id" :label="item.procedureName" :value="item.id">
            </el-option>
          </el-select>
        </td>
        <td class="table1Td"><span class="required">*</span>最后修订日期</td>
        <td>
          <el-date-picker size="mini" v-model="sopform.lastUpdateDate" type="date" placeholder="选择日期">
          </el-date-picker>
        </td>
      </tr>
      <tr>
        <td>客户图号</td>
        <td>{{customerDrawingNo}}</td>
        <td>车间</td>
        <td>{{produceShopName}}</td>
        <td>版本</td>
        <td>
          <el-input size="mini" v-model="sopform.version" maxlength="10" placeholder="请输入版次"></el-input>
        </td>
      </tr>
    </table>
    <table border="1" class="workTable">
      <tr>
        <td>设备/工装名称</td>
        <td>设备/工装编号</td>
        <td>原辅材料</td>
        <td>规格型号</td>
        <td>定额</td>
      </tr>
      <tr v-if="equipmentList.length==0">
        <td colspan="5">
          <avue-empty></avue-empty>
        </td>
      </tr>
      <tr v-if="equipmentList.length>0" v-for="(item,index) in equipmentList" :key="index">
        <td>{{item.equipmentName}}</td>
        <td>{{item.equipmentNo}}</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="workpieceTr">
        <td></td>
        <td>工件来源</td>
        <td>{{sopform.artifactCome}}</td>
        <td>工件去处</td>
        <td>{{sopform.artifactOut}}</td>
      </tr>
    </table>
    <avue-crud class="top15" :option="sopoption" :table-loading="loading" :data="sopdata" ref="sopcrud" v-model="obj" @row-update="addUpdate" @row-del="rowDel" @row-save="rowSave" @refresh-change="refreshChange" @on-load="onLoad">
      <template slot-scope="{row}" slot='testItems'>
        <span v-if="row.testItemsType=='1'">{{row.testItems}}</span>
        <el-image v-else style="width: 40px; height: 40px" :src="row.testItems" :preview-src-list="[row.testItems]">
        </el-image>
      </template>
    </avue-crud>
  </div>
</template>
<script>
import { getProProcessList } from '@/api/project/productData/processData';
import {
  getCustomerAndDrawingNo,
  getPreviousAndNextProcedure,
  getEquipmentByProcedureId,
  getControlPlanByProcedureId,
} from '@/api/projectplan/sop';
import { init } from '@/mixins/init';
export default {
  mixins: [init],
  props: {
    projectId: {
      type: String,
    },
    productId: {
      type: String,
    },
    materialName: {
      type: String,
    },
    type: {
      type: String,
    },
    sopform: {
      type: Object,
    },
    sopdata: {
      type: Array,
    },
  },
  data() {
    return {
      sopType: 'add',
      obj: {},
      procedureOptions: [],
      customerDrawingNo: '',
      customerName: '',
      produceShopName: '',
      equipmentList: [],
      sopoption: {
        index: true,
        indexLabel: '序号',
        addBtn: false,
        editBtn: false,
        delBtn: false,
        header: false,
        menu: false,
        column: [
          {
            label: '检验项目',
            prop: 'testItems',
            slot: true,
            overHidden: true,
          },
          {
            label: '特殊等级',
            prop: 'specialGrade',
            width: 80,
            align: 'center',
            overHidden: true,
            type: 'select',
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=featureType',
            props: {
              label: 'dictValue',
              value: 'dictKey',
            },
          },
          {
            label: '检验频率',
            prop: 'testFrequency',
            overHidden: true,
          },
          {
            label: '使用量具',
            prop: 'useMeasuringTool',
            overHidden: true,
          },
          {
            label: '控制方法',
            prop: 'controlMethod',
            overHidden: true,
          },
          {
            label: '异常处理',
            prop: 'exceptionHandling',
            minWidth: 150,
            cell: true,
            rules: [
              {
                required: true,
                message: '请输入异常处理',
                trigger: 'blur',
              },
            ],
          },
        ],
      },
    };
  },
  created() {
    if (this.data.length > 0) {
      this.sopType = 'edit/view';
    }
    if (this.type == 'edit') {
      this.option.header = true;
      this.option.menu = true;
    } else {
      this.option.header = false;
      this.option.menu = false;
    }
    getProProcessList({ productId: this.productId }).then((res) => {
      const data = res.data.data;
      this.procedureOptions = data;
    });
    getCustomerAndDrawingNo({ projectId: this.projectId, productId: this.productId }).then((res) => {
      const data = res.data.data;
      this.customerDrawingNo = data.customerDrawingNo;
      this.customerName = data.customerName;
    });
  },
  watch: {
    'sopform.procedureId'(val, oldVal) {
      if (val) {
        this.sopType = 'edit/view';
        this.procedureOptions.every((item) => {
          if (item.id == val) {
            this.produceShopName = item.produceShopName;
            return false;
          } else {
            return true;
          }
        });
        getPreviousAndNextProcedure({ productId: this.productId, procedureId: val }).then((res) => {
          const data = res.data.data;
          this.sopform.artifactCome = data.artifactCome;
          this.sopform.artifactOut = data.artifactOut;
        });
        getEquipmentByProcedureId({ procedureId: val }).then((res) => {
          const data = res.data.data;
          this.equipmentList = data;
        });
        getControlPlanByProcedureId({ productId: this.productId, procedureId: val }).then((res) => {
          const data = res.data.data;
          if (this.type == 'edit') {
            this.sopdata = data.map((item) => {
              item.exceptionHandling = '';
              item.$cellEdit = true;
              return item;
            });
          }
        });
      }
    },
  },
  methods: {},
};
</script>
<style lang="scss">
.workTable {
  width: 100%;
  border: 1px solid #6b94c1;
  font-size: 12px;
  td {
    font-size: 12px;
    line-height: 21.5px;
    height: 22px;
    padding: 0 10px;
  }
  .required {
    color: #f56c6c;
    margin-right: 4px;
  }
  .workpieceTr {
    td {
      border-top: 2px solid #6b94c1;
    }
  }
  .boldText {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
  }
  .table1Td {
    width: 100px;
  }
}
.top15 {
  margin-top: 15px;
}
</style>